<template>
	<view class="editUser">
		<view class="li">
			<view class="li-item">
				<text class="li-item-left">头像</text>
				<view class="li-item-right" @click="setAvatar">
					<image class="avatar" :src="avatar" mode="aspectFill"></image>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="li-item">
				<text class="li-item-left">姓名</text>
				<view class="li-item-right">
					<input v-model="nickname" class="input" type="text" placeholder="请输入姓名" />
				</view>
			</view>
		</view>
		<view class="footer">
			<u-button color="#f05948" shape="circle" ripple @click="save">保存</u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		post
	} from '../../static/utils/request'
	import {
		User,
		Upload
	} from '../../static/utils/service'
	import {
		Loading,
		Routes,
		Toast,
		UniBaseApi
	} from '../../static/utils/utils'
	import {
		baseUrl
	} from '../../static/utils/env'
	export default {
		data() {
			return {
				avatar: '',
				nickname: ''
			}
		},
		computed: {
			...mapState(['userinfo'])
		},
		onLoad() {
			this.avatar = this.userinfo.avatar
			this.nickname = this.userinfo.nickname
		},
		methods: {
			async setAvatar() {
				const urls = await UniBaseApi.chooseImage(1)
				const res = await UniBaseApi.uploadImage(`${baseUrl}/${Upload.upload}`, urls)
				this.avatar = res.uri
			},
			async save() {
				const res = await post(User.updateUser, {
					avatar: this.avatar,
					nickname: this.nickname
				}, '提交中')
				if (res.code === 1) {
					Toast.success('修改成功')
					setTimeout(() => {
						Routes.back()
					}, 1500)
				} else {
					Toast.none(res.msg)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.editUser {
		.li {

			.li-item {
				padding: 0 25rpx;
				height: 95rpx;
				border-bottom: 1rpx solid #eee;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.li-item-right {
					height: 100%;
					display: flex;
					align-items: center;

					.avatar {
						margin-right: 10rpx;
						width: 60rpx;
						height: 60rpx;
					}

					.input {
						width: 400rpx;
						height: 100%;
						text-align: right;
					}
				}
			}
		}

		.footer {
			margin-top: 100rpx;
			padding: 0 100rpx;
		}
	}
</style>